<template>
  <div class="c-bg-white" v-if="circleDetail != null">
    <!-- 问答弹窗 -->
    <circle-modal-answer @clickSubmitAsw="clickSubmitAsw" @closeAnswerModal="closeAnswerModal" @clickShowVideoAnswer="clickShowVideoAnswer" :isUpoloadVideo="isUpoloadVideo"
      :showAnswerModal="showAnswerModal" :curChaseId="curChaseId" :isPublic="isPublic" :curAswQuestionDetailId="curAswQuestionDetailId"></circle-modal-answer>
    <div class="c-w100 c-pt30" :class="circleDetail.questionDetailId > 0 ?'c-bg-sgray':'c-bg-white c-bd-b12'">
      <!-- top -->
      <div class="c-flex-row c-ph24 c-aligni-center c-p">
        <div class="c-ww64 c-hh64 c-brp50" @click="handleClickCircleIndex()">
          <template v-if="circleDetail.questionDetailId > 0">
            <img v-if="circleDetail.questionDetail.isHidden == -1 && circleDetail.questionDetail.isMe != 1" src="@/assets/no_login_head.png" alt="" class="c-w100 c-h c-brp50">
            <img v-else v-lazy="circleDetail.headimgurl || require('@/assets/defult_head.png')" alt="" class="c-w100 c-h c-brp50">
          </template>
          <template v-else>
            <img v-lazy="circleDetail.headimgurl || require('@/assets/defult_head.png')" alt="" class="c-w100 c-h c-brp50">
          </template>
        </div>
        <div class="c-pl12 c-flex-column c-justify-sb c-flex-grow1 c-w0 c-hh64">
          <div class="c-flex-row c-justify-sb">
            <div class="c-fs24 c-fc-xblack c-flex-row c-aligni-center c-text-ellipsis1" @click="handleClickCircleIndex()">
              <template v-if="circleDetail.questionDetailId > 0">
                <span class="c-text-ellipsis1" v-if="circleDetail.questionDetail.isHidden == -1 && circleDetail.questionDetail.isMe != 1">匿名者</span>
                <span class="c-text-ellipsis1" v-else>{{circleDetail.nickname}}</span>
              </template>
              <template v-else>
                <span class="c-text-ellipsis1">{{circleDetail.nickname}}</span>
              </template>
              <span class="circle_m c-ml12" v-if="circleDetail.role == 2"></span>
            </div>
            <div class="iconfont c-fc-gray"
              v-if="circleDetail.myRole == 2 || circleDetail.isSelf == true || (companyAuth.enableQuestionModule == 1 && circleDetail.isAnswer == 1 && circleDetail.myRole == 1 && (circleDetail.isAllowTopEssence == 1 || circleDetail.isAllowHideFeeds == 1))"
              @click.stop="handleClickOperation()">&#xe6db;</div>
          </div>
          <div class="c-fs20 c-fc-gray">{{createdAtTime(circleDetail.createdAt)}}
            <span v-if="circleDetail.questionDetailId > 0">{{circleDetail.questionDetail.isAlreadyResponse == 1?'提问：(已回答)':'提问:'}}</span>
          </div>
        </div>
        <!-- 继续回答 -->
        <span
          :class="(circleDetail.myRole == 2 || circleDetail.isSelf == true || (circleDetail.myRole == 1 && (circleDetail.isAllowTopEssence == 1 || circleDetail.isAllowHideFeeds == 1))) ? 'c-p-r60':'c-p-r24'"
          class="c-pa iconfont fs96 c-fc-sgray" v-if="circleDetail.questionDetail.status == -1">&#xe999;</span>
      </div>
      <!-- content -->
      <div class="c-w100 c-pt16 c-pb30 c-ph24">
        <div class="c-vcAlign-middle c-fs24 c-fc-xblack" :class="circleDetail.questionDetail.status == -1?'c-opacity60':''">
          <div class="c-hh30 c-ph6 c-fs22 c-flex-row c-aligni-center hideStatus c-inlineblack c-mr10 c-br4"
            v-if="circleDetail.status == -1 && circleDetail.role == 2 || circleDetail.myRole == 2 && circleDetail.status == -1">
            <span class="hideStatus c-fs20">
              <i class="iconfont c-fs14 c-vcAlign-middle">&#xe703;</i> 隐藏
            </span>
          </div>
          <div class="c-hh30 c-ph6 c-fs22 c-flex-row c-aligni-center top c-inlineblack c-mr10 c-br4" v-if="circleDetail.isTop == 1">
            <span class="c-fs20 c-fc-xblue ">
              <i class="iconfont c-fs14 c-vcAlign-middle">&#xe704;</i> 置顶
            </span>
          </div>
          <div class="c-hh30 c-ph6 c-fs22 c-flex-row c-aligni-center select c-inlineblack c-mr10 c-br4" v-if="circleDetail.isEssence == 1">
            <span class="c-fs20 ">
              <i class="iconfont c-fs14 c-vcAlign-middle">&#xe721;</i> 精选
            </span>
          </div>
          <span class="c-vcAlign-middle c-ww-bw" v-if="circleDetail.resourceList.textStr != null" v-html="openlink(circleDetail.resourceList.textStr)" @click.stop="handleClickOpenLink($event)"></span>
        </div>
        <!-- 图片列表 -->
        <div class="c-w100 c-flex-row c-flexw-wrap c-mt8" :class="circleDetail.questionDetail.status == -1?'c-opacity60':''" v-if="circleDetail.resourceList.imgArr != null">
          <div class="c-ww192 c-hh192 c-text-hidden thumbnail c-br10" @click.stop="clickPreviewImage(imgItem, circleDetail.resourceList.imgArr, imgIndex)"
            v-for="(imgItem, imgIndex) in circleDetail.resourceList.imgArr" :key="imgIndex">
            <img class="c-w100 c-h img-pe-none c-object-fit-cover c-br10" v-lazy="$addXossFilter(imgItem || require('@/assets/defult270.png'))" alt="">
          </div>
        </div>
        <!-- 语音 -->
        <div
          :class="[circleDetail.isTop == 1 || circleDetail.isEssence == 1 || circleDetail.resourceList.imgArr != null || circleDetail.resourceList.textStr != null ? 'c-mt24':'', circleDetail.questionDetail.status == -1?'c-opacity60':'']"
          v-if="circleDetail.resourceList.audioArr != null">
          <template v-for="(audioItem, audioIndex) in circleDetail.resourceList.audioArr">
            <div class="c-ww300 c-br10 c-pv16 c-ph20 c-fc-white c-bg-xgreen c-flex-row c-justify-center c-aligni-center" @click.stop="clickPlayAudio(audioItem.content, audioItem.audioTime)"
              :key="audioIndex" :class="audioIndex == circleDetail.resourceList.audioArr.length - 1 ?'':'c-mb16'">
              <!-- <div
                class="c-fs48 c-fc-xblue iconfont"
                :class="playAduioSrc != circleDetail.resourceList.audioArr.content ? 'icon-bofang1':'icon-zanting4'"
              ></div> -->
              <img class="c-ww30 c-hh30 c-rotate180" v-if="playAduioSrc != audioItem.content" :src="require('@/assets/i/wap/course/chat_right_play.png')" alt="" />
              <img class="c-ww30 c-hh30 c-rotate180" v-else :src="require('@/assets/i/wap/course/chat_right_play.gif')" alt="" />
              <div class="c-flex-row c-flex-center c-flex-1 c-fs24">点击播放</div>
              <!-- <div class="circle_progress c-flex-1">
                <div
                  class="circle_progress_bar"
                  :style="{width: playAduioSrc != circleDetail.resourceList.audioArr.content ? 0 : progress + '%'}"
                >
                  <span class="circle_round"></span>
                </div>
              </div> -->
              <span class="c-fs22 c-fc-white">{{audioItem.audioTime}}"</span>
            </div>
          </template>
        </div>
        <!-- 文件 -->
        <div v-if="circleDetail.resourceList.fileArr.length" class="c-ph10 c-mt20 c-pv10">
          <div @click.stop="downloadFile(fileItem)" v-for="(fileItem,fileIndex) in circleDetail.resourceList.fileArr" :key="fileIndex" class="c-fs24 c-fc-xblack c-flex-row c-aligni-center c-pv15">
            <div class="files-icon c-mr10 c-flex-shrink0" :class="fileItem.suffixClassName"></div>
            <div class="c-flex-1 c-text-hidden">
              <p class="c-text-ellipsis1">{{ fileItem.fileName }}</p>
            </div>
          </div>
        </div>
        <!-- 视频 -->
        <div class="c-mt24" :class="circleDetail.questionDetail.status == -1?'c-opacity60':''" v-if="circleDetail.resourceList.videoArr != null">
          <div class="c-p c-ww320 c-hh180 c-fc-white c-flex-row c-flex-center" @click.stop="clickShowVideo(circleDetail.resourceList.videoArr.content)">
            <i class="iconfont c-pa c-fs40" v-if="circleDetail.resourceList.videoArr.videoLogo != ''">&#xe869;</i>
            <img class="c-w100 c-h c-br10 c-object-fit-cover"
              v-lazy="$addXossFilter(circleDetail.resourceList.videoArr.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')"
              alt="">
          </div>
        </div>
        <!-- 直播 -->
        <div class="c-mt24" v-if="circleDetail.relationLive.length > 0">
          <div class="c-flex-row c-aligni-center c-br12 c-bg-sgray c-ph24 c-pv24" v-for="(liveItem, liveIndex) in circleDetail.relationLive" :key="liveIndex"
            @click.stop="clickGoLiveDetail(circleDetail.liveId, circleDetail.liveType)">
            <div class="c-ww180 c-hh120 c-br12">
              <img class="c-w100 c-h c-object-fit-cover c-br12" :src="$addXossFilter(circleDetail.liveType == 3 ? liveItem.cover : liveItem.avatar, require('@/assets/defult270.png'))" alt="">
            </div>
            <div class="c-flex-grow1 c-w0 c-hh120 c-flex-column c-justify-sb c-ml20">
              <div class="c-text-ellipsis2 c-fs24 c-fc-xblack">{{liveItem.name}}</div>
              <div class="c-flex-row c-justify-sb c-aligni-center">
                <div class="c-fs24 theme-fc">
                  <span v-if="liveItem.payType == 2" class="c-fs18">{{'￥' | iosPriceFilter}}</span>
                  {{liveItem.payType | priceValueFilter(liveItem.price, 51)}}
                </div>
                <div class="c-flex-row c-flex-center c-hh26 c-ph8 c-br12 c-fs18 c-fc-white" :class="statusClassName[liveItem.status]">
                  <div class="c-flex-row c-aligni-end c-mr6" v-if="liveItem.status==1">
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                  </div>
                  {{statusMap[liveItem.status]}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 主题 -->
        <div class="c-mt24" v-if="circleDetail.isShow" @click.stop="handleClickThemeRoute()">
          <div class="c-inline-center theme-bg-10 c-hh40 c-pv4 c-ph20 c-fs22 theme-fc c-flex-row c-aligni-center c-br20">
            <div class="c-flex-row c-flex-center c-h">
              <i class="iconfont c-fs20 c-pr8">&#xe6fd;</i>
              {{circleDetail.themeName}}
            </div>
          </div>
        </div>
        <!-- 推荐课程 -->
        <div class="c-mt16 c-flex-row c-maxw596" v-if="circleDetail.relationContent.length > 0" @click.stop="handleClickRecommend(circleDetail)">
          <div class="c-maxw596 theme-bg-10 c-hh40 c-pv4 c-ph20 c-fs22 theme-fc c-flex-row c-aligni-center c-br20">
            <div class="c-flex-row c-flex-center c-h c-maxw596 c-text-hidden">
              <div class="c-fs22 c-fc-xblack">TA的推荐：</div>
              <div class="c-text-ellipsis1 c-flex-1">{{relationContent(circleDetail.relationContent)}}</div>
              <i class="iconfont c-fs22">&#xe635;</i>
            </div>
          </div>
        </div>
        <!-- 浮动按钮 -->
        <div class="c-pf c-pz1 c-p-b240 c-p-c-216 c-ww70 c-hh70 theme-bg c-flex-row c-justify-center c-aligni-center c-brp50 theme-box-shadow" @click="handleClickCircleFeed()">
          <i class="iconfont c-fc-white c-fs34">&#xe6bc;</i>
        </div>
      </div>
      <!-- 围观显示 -->
      <div class="c-w100 c-flex-row c-bg-white c-ph24 c-pv24 c-aligni-center c-bd-b12" @click.stop="handleClickAnswerCircueeList(circleDetail.questionDetail.answerId)"
        v-if="companyAuth.enableQuestionModule == 1 && circleDetail.questionDetail.status != -1 && circleDetail.questionDetailId > 0 && (circleDetail.questionDetail.questionRole == 2 && circleDetail.questionDetail.isAlreadyResponse != 1 || circleDetail.questionDetail.questionRole == 1 && circleDetail.questionDetail.isDirect != 1 || circleDetail.questionDetail.isAlreadyResponse != 1 && circleDetail.questionDetail.questionRole == 3)">
        <div class="c-ww64 c-hh64 c-brp50">
          <img class="c-ww64 c-hh64 c-brp50" :src="circleDetail.questionDetail.avatar || $addXossFilter(require('@/assets/defult_head.png'))" alt="">
        </div>
        <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0 c-pl12">
          <div class="c-flex-row c-justify-sb">
            <div class="c-fs24 c-fc-xblack c-flex-row c-aligni-center c-text-ellipsis1">
              <span class="c-text-ellipsis1">{{circleDetail.questionDetail.answererName}}</span>
              <span class="answer_m c-ml12"></span>
            </div>
          </div>
          <div class="c-fs20 c-fc-gray">{{circleDetail.questionDetail.isAlreadyResponse != 1 ? '该问题暂未回答':'已回答'}}</div>
        </div>
        <!-- 未回答且为答主身份 -->
        <div class="c-ph24 c-hh40 c-flex-row c-flex-center c-fs18 c-fc-white c-br32 theme-bg-gradient"
          v-if="circleDetail.questionDetail.isAlreadyResponse != 1 && circleDetail.questionDetail.questionRole == 3" @click.stop="openAnswerModal(circleDetail.questionDetailId)">回答</div>
        <!-- 已经回复且没有围观权限 isAlreadyResponse：是否已回复  freeOnLook：是否免费围观  questionRole : 1,围观的人 2:提问者  3:答主-->
        <div class="c-ph24 c-hh40 c-flex-row c-flex-center c-fs18 c-fc-white c-br32 theme-bg-gradient"
          v-if="circleDetail.questionDetail.isAlreadyResponse == 1 && circleDetail.questionDetail.freeOnLook != 1 && circleDetail.questionDetail.questionRole == 1 && circleDetail.questionDetail.isDirect == -1 && (circleDetail.questionDetail.status != 1 || circleDetail.questionDetail.status != 4)"
          @click.stop="handleClickFreeOnLook()">{{'￥' | iosPriceFilter}}{{circleDetail.questionDetail.onLookPrice | moneyStr}} 围观</div>
      </div>
      <!-- 分享时候内容展示 -->
    </div>
    <!-- 圈主问答 -->
    <circle-answer-list v-if="circleDetail.questionDetail.status != -1" :enableQuestion="companyAuth.enableQuestionModule" :answerInfo="answerInfo" :questionInfo="questionInfo"
      :userIdentity="userIdentity" :chaseList="chaseList" :restAppendQuestionNum="restAppendQuestionNum" @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio"
      :playAduioSrc="playAduioSrc" @clickShowVideo="clickShowVideo" @clickFreeChase="clickFreeChase" @openAnswerModal="openAnswerModal"></circle-answer-list>
    <!-- 评论 -->
    <div class="c-w100 c-ph24 c-bg-white">
      <my-small-tabbar id="tabhBar" :tabList="tabList" :isScroll="true" :flexClass="'c-justify-start'" :tabIndex="tabIndex" @changeTab="changeType" class="c-bg-white c-bd-b1"></my-small-tabbar>
    </div>
    <!-- 评论，点赞 -->
    <div class="c-w100 c-bg-white c-ph24" v-show="tabIndex == 0">
      <div>
        <circle-comment @loadMoreComments="loadMoreComments" @getCommentOperation="getCommentOperation" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo"
          @handleClickCircleIndex="handleClickRouteCircle" :comments="comments" :playAduioSrc="playAduioSrc" :progress="progress"></circle-comment>
        <loading-status-tem class="c-pb100" :dataStatus="commentDataStatus" noDataText="暂无评论"></loading-status-tem>
      </div>
    </div>
    <div class="c-w100 c-bg-white c-ph24" v-show="tabIndex == 1">
      <template v-for="(item, index) in zansUserList">
        <div class="c-flex-row c-aligni-center c-w100 c-hh108 c-bd-b1" @click.stop="handleClickRouteCircle(item)" :key="index">
          <div class="c-ww60 c-hh60">
            <img v-lazy="item.headimgurl || require('@/assets/defult_head.png')" alt="" class="c-ww60 c-hh60 c-brp50">
          </div>
          <div class="c-pl20 c-fs24 c-fc-xblack">{{item.nickname}}</div>
          <img v-if="item.role == 2" class="c-ww80 c-ml12" :src="require('@/assets/i/wap/circle/circle_m.png')">
        </div>
      </template>
      <loading-status-tem class="c-pb100" :dataStatus="dataStatus" noDataText="暂无点赞"></loading-status-tem>
    </div>
    <!-- 底部 -->
    <div class="c-flex-row c-w100 c-hh80 c-bg-white c-pf c-p-b0 c-bd-t1 c-maxw640">
      <div class="c-flex-1 c-flex-row c-justify-center c-aligni-center" @click.stop="like()">
        <i class="iconfont c-fc-sblack" :class="circleDetail.isZans ? 'c-fc-xmlred':''">{{circleDetail.isZans ? `&#xe6f9;`:`&#xe6ba;`}}</i>
        <span class="c-ml12 c-fs24" :class="circleDetail.isZans ?'c-fc-xmlred':'c-fc-sblack'">点赞</span>
      </div>
      <div class="c-flex-1 c-flex-row c-justify-center c-aligni-center c-p" @click="showAddCommentModal">
        <i class="iconfont c-fc-sblack">&#xe99c;</i>
        <span class="c-ml12 c-fc-sblack c-fs24">{{circleDetail.commentCount == 0 ? "评论":$options.filters.formatTenThousand(circleDetail.commentCount)}}</span>
      </div>
      <div class="c-flex-1 c-flex-row c-justify-center c-aligni-center" @click.stop="handleClickForward()">
        <i class="iconfont c-fc-sblack">&#xe699;</i>
        <span class="c-ml12 c-fc-sblack c-fs24">转发</span>
      </div>
    </div>
    <!-- 音频 -->
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <!-- 视频 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc"></video-popup>
    <!-- 置顶，精华，隐藏 -->
    <open-modal :openModal="showMoreActions" @closeModal="closeMoreActions">
      <div class="c-br-tl20 c-br-tr20 c-pt40 c-pb60 c-ph20 c-text-hidden c-w100 c-bg-sgray">
        <div class="c-w100 c-flex-row c-flexw-wrap">
          <template v-for="(item, index) in moreActions">
            <div class="c-flex-column c-aligni-center c-justify-center c-hh138 c-bg-white c-br20 c-mh10 c-mb40 c-ww130" v-if="item.isshow == true"
              @click="getHandleFeeds(item.updateField, item.status, item.circleFeedsId, item.isClick, item.themeId)" :key="index">
              <i class="iconfont c-fs36" :class="[item.icon, item.color]"></i>
              <div class="c-fs24 c-w100 c-mt12 c-textAlign-c" :class="item.fontColor">{{item.title}}</div>
            </div>
          </template>
        </div>
        <div class="c-flex-row c-flex-center c-w100 c-hh80 c-fs24 c-fc-xblack c-bg-white c-br40" @click="closeMoreActions">取消</div>
      </div>
    </open-modal>
    <!-- 添加评论 -->
    <circle-add-comment class="c-pz101" ref="circleAddComment" :showAddComment="showAddComment" :addComment="addComment" :replyInfo="operationComment" @closeAddComment="closeAddComment"
      @playAddCommentVideo="playAddCommentVideo" @sendComment="sendComment"></circle-add-comment>
    <!-- 海报 -->
    <circle-poster ref="circlePoster" :qrcodeImg="qrcodeImg"></circle-poster>
    <!-- 评论操作弹窗 -->
    <open-modal class="c-pz101" :openModal='showOperaction' @closeModal='showOperaction = false'>
      <div class="c-br-tl20 c-br-tr20 c-pb60 c-ph24 c-text-hidden c-w100 c-bg-sgray">
        <div class="c-w100 c-flex-row c-aligni-center">
          <div class="c-flex-column c-aligni-center c-justify-center c-ww100 c-pv40 c-mr20" @click="addReply">
            <div class="c-ww80 c-hh80 c-flex-row c-aligni-center c-justify-center c-bg-white c-brp50"><i class="iconfont c-fc-xblack c-fs36">&#xe99c;</i></div>
            <span class="c-fs24 c-fc-gray c-w100 c-mt12 c-textAlign-c">回复</span>
          </div>
          <div class="c-flex-column c-aligni-center c-justify-center c-ww100 c-pv40 c-mr20" @click="deleteComment">
            <div class="c-ww80 c-hh80 c-flex-row c-aligni-center c-justify-center c-bg-white c-brp50"><i class="iconfont c-fc-xblack c-fs36">&#xe6b3;</i></div>
            <span class="c-fs24 c-fc-gray c-w100 c-mt12 c-textAlign-c">删除</span>
          </div>
        </div>
        <div class="c-flex-row c-flex-center c-w100 c-hh80 c-fs24 c-fc-xblack c-bg-white c-br40" @click="showOperaction = false">取消</div>
      </div>
    </open-modal>
    <circle-recommend :showOpenModal="recommendModal" @handleClickCloseRecommend="handleClickCloseRecommend" :recommendObject="recommendObject"></circle-recommend>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import circleUtils from '@/utils/circleUtils.js';
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import circleComment from "@/components/homePage/circle/circleComment.vue";
import circleAddComment from "@/components/homePage/circle/circleAddComment.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import circlePoster from "@/components/homePage/circle/circlePoster.vue";
import CircleAnswerList from "@/components/homePage/circle/circleAnswerList.vue";
import CircleModalAnswer from "@/components/homePage/circle/circleModalAnswer.vue";
import circleRecommend from "@/components/homePage/circle/circleRecommend.vue";
const LIMIT = 10;
let pageIndex = 0;
let page = 1;
// let progressTime;
let commentPage = 1; // 一级评论页
let childCommentChangeArr = [];
let isAddComment = false; // 判断是否是增加评论
let cIndex = 0; // 判断当前评论的索引
let getType = 1; // 评论获取类型 1是正常分页加载 2是操作刷新数据
let isFilterComment = false; // 判断是否删除数据
export default {
  name: 'CircleDetail',
  data() {
    return {
      tabList: [
        {
          index: 0,
          title: '评论'
        },
        {
          index: 1,
          title: '点赞'
        }
      ],
      tabIndex: 0,
      showAddComment: false, // 展示添加评论
      addComment: { // 添加评论
        text: '',
        img: []
      },
      showMoreActions: false,
      moreActions: [],
      operationComment: null,
      circleId: "",
      circleFeedsId: "",
      circleDetail: null,
      playAduioSrc: "", //音频地址
      progress: 0,
      isPlayingAudio: false,
      showVideo: false,
      currentVideoObj: {},
      zansUserList: [], //点赞数据
      dataStatus: 'HAS_MORE_DATA',
      comments: [], // 全部评论信息
      commentDataStatus: 'HAS_MORE_DATA', // 一级评论数据状态
      qrcodeImg: "",
      encodeUserId: "",
      status: 1, //默认正常1，-1拉入黑名单
      isExit: 1, //默认正常1，-1退出圈子
      showOperaction: false, // 展示评论操作
      myIsNewCircleMaster: -1, //1,新圈主，-1否
      myNewCircleMasterToast: -1, //1弹过，-1没弹过
      myIntroduce: '', //圈主简介信息
      circleMemberId: "",
      // 答主信息
      answerInfo: {},
      questionInfo: {},
      userIdentity: '', //1答主2提问者3围观者4都不是
      allInfo: {},
      restAppendQuestionNum: '', //剩余追问次数
      chaseList: [], //追问列表
      curChaseId: "", //当前追问回答问题ID
      isPublic: 1,
      curAswQuestionDetailId: "", //当前回答问题的id
      showAnswerModal: false,
      isUpoloadVideo: false,
      isShowVideoAnswer: false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      statusMap: {
        0: "预告",
        1: "正在直播",
        2: "回放",
        3: "直播已结束",
        4: "已过期"
      },
      statusClassName: {
        0: 'status-0',
        1: 'status-1',
        2: 'status-2',
        3: 'status-3',
        4: 'status-4',
      },
      recommendModal: false,
      recommendObject: {},
      sendCommentFlag: false,
    }
  },
  components: {
    circleComment,
    OpenModal,
    circleAddComment,
    loadingStatusTem,
    MySmallTabbar,
    videoPopup,
    circlePoster,
    CircleAnswerList,
    CircleModalAnswer,
    circleRecommend
  },
  computed: {
    relationContent() {
      return function (Array) {
        let nameText = Array.map((item) => {
          return item.name
        }).join('、')
        return nameText
      }
    },
    createdAtTime() {
      return function (time) {
        let timeStr = utilJs.changeCommentTime(time);
        return timeStr;
      }
    },
    openlink() {
      return function (text) {
        /* eslint-disable */
        let title = text.replace(/[<>&"]/g, function (c) {
          return { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }[c];
        })
        let titleReg = new RegExp('\n', "g");
        title = title.replace(titleReg, "<br>");
        if (!title) {
          return '';
        }
        if (title.length) {
          let reg = /(https?|ftp|file)(:\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
          title = title.replace(reg, function (txt) {
            return `<span class="theme-fc link">${txt}</span>`
          })
        }
        return title;
      }
    },
  },
  activated() {
    setDocumentTitle("动态详情");
    this.answerInfo = {};
    this.questionInfo = {};
    this.userIdentity = "";
    this.allInfo = {};
    this.restAppendQuestionNum = "";
    this.chaseList = [];
    this.circleId = "";
    this.circleFeedsId = this.$route.query.circleFeedsId || "";
    this.circleMemberId = "";
    this.tabIndex = 0;
    this.showAddComment = false;
    this.operationComment = null;
    this.circleDetail = null;
    this.playAduioSrc = "";
    this.progress = 0;
    this.isPlayingAudio = false;
    this.showVideo = false;
    this.currentVideoObj = {};
    this.moreActions = [];
    this.showMoreActions = false;
    this.zansUserList = [];
    this.status = 1;
    this.isExit = 1;
    this.qrcodeImg = "";
    this.encodeUserId = "";
    this.curChaseId = "";
    this.isPublic = 1;
    this.curAswQuestionDetailId = "";
    this.showAnswerModal = false;
    this.isUpoloadVideo = false;
    this.isShowVideoAnswer = false;
    this.recommendModal = false;
    this.recommendObject = {};
    this.sendCommentFlag = false;
    this.getCircleComment();
    this.getFeedsDetail();
    this.initData();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.$previewImg.hide();
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    downloadFile(data) {
      circleUtils.downloadFile(data, this)
    },
    handleClickRecommend(item) {
      this.recommendModal = true
      this.recommendObject = item
    },
    handleClickCloseRecommend() {
      this.recommendModal = false
    },
    clickGoLiveDetail(liveId, liveType) {
      let toPath = ''
      if (liveType == 1) {
        toPath = `/homePage/live/livePersonalDetail?liveId=${liveId}`
      } else if (liveType == 2) {
        toPath = `/homePage/live/liveDetail?liveId=${liveId}`;
      } else {
        toPath = `/homePage/privateClass/classDetail?classId=${liveId}`;
      }
      this.$routerGo(this, 'push', {
        path: toPath
      })
    },
    // 请求访问日志接口
    addVisitLog() {
      utilJs.postMethod(global.apiurl + `circle/addVisitLog`, {
        circleId: this.circleId,
        circleMemberId: this.circleDetail.myCircleMemberId
      }, res => { })
    },
    handleClickOpenLink(event) {
      if (event.target.className.includes('link')) {
        let href = event.target.outerText;
        utilJs.locationHref(href);
        return;
      }
    },
    handleClickAnswerCircueeList(answerId) {
      this.$routerGo(this, "push", {
        path: "/homePage/qa/aswerCircuseeList",
        query: {
          answerId: answerId
        }
      })
    },
    // 添加围观记录
    addToCircusee() {
      utilJs.getMethod(global.apiurl + `question/circuseeDetail?questionDetailId=${this.circleDetail.questionDetailId}`, res => {
        this.$routerGo(this, "push", {
          path: "/homePage/course/coursePay",
          query: {
            extId: res.questionOrderId,
            ckFrom: global.ckFrom.circusee,
            cId: -1,
            circleFeedsId: this.circleFeedsId,
          }
        })
      })
    },
    // 围观提问
    handleClickFreeOnLook() {
      if (this.circleDetail.questionDetail.isDirect == -1) {
        this.addToCircusee();
      }
    },
    clickSubmitAsw() {
      this.curChaseId = "";
      this.isPublic = 1;
      this.curAswQuestionDetailId = "";
      this.showAnswerModal = false;
      this.isUpoloadVideo = false;
      this.isShowVideoAnswer = false;
      this.getFeedsDetail();
      this.initData();
    },
    closeAnswerModal() {
      this.showAnswerModal = false;
    },
    clickShowVideoAnswer(videoSrc) {
      this.isShowVideoAnswer = true;
      this.showAnswerModal = false;
      this.showVideo = true;
      this.currentVideoObj = { videoSrc }
    },
    openAnswerModal(qId, chaseItem) {
      this.curChaseId = "";
      let chasePublic = 1;
      if (chaseItem) {
        this.curChaseId = chaseItem.questionDetailId;
        chasePublic = chaseItem.isPublic;
      }
      this.isPublic = this.questionInfo.isPublic == 1 && chasePublic == 1 ? 1 : -1;
      this.curAswQuestionDetailId = qId;
      this.showAnswerModal = true;
      this.isUpoloadVideo = true;
    },
    // 免费追问
    clickFreeChase() {
      this.$routerGo(this, "push", {
        path: "/homePage/qa/questionDetail",
        query: {
          answerId: this.answerInfo.answerId,
          chaseId: this.questionInfo.questionDetailId,
          goAsk: 0,
          src: 1,
          circleId: this.circleId,
          circleMemberId: this.circleMemberId,
          circleFeedsId: this.circleFeedsId
        }
      })
    },
    // 获取答主信息
    getQuestionIfno() {
      utilJs.getMethod(global.apiurl + `question/getQuestionDetail?questionDetailId=${this.circleDetail.questionDetailId}`, res => {
        this.answerInfo = res.answerInfo;
        this.questionInfo = res.detailInfo;
        this.comeFrom = res.detailInfo.comeFrom;
        this.userIdentity = res.userIdentity;
        this.allInfo = res;
        //有回答过才可追问
        if (res.detailInfo.restAppendQuestionNum && res.detailInfo.status == 2) {
          this.restAppendQuestionNum = res.detailInfo.restAppendQuestionNum;
        }
        let appendList = res.detailInfo.appendQuestion || [];
        let cArray = [];
        for (let item of appendList) {
          if (this.questionInfo.isMe == 1 || this.answerInfo.isMe == 1 || item.isPublic == 1) {
            cArray.push(item)
          }
        }
        this.chaseList = cArray;
      })
    },
    handleClickThemeRoute() {
      let _this = this;
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      if (this.circleDetail.joinType == 2 && !this.circleDetail.isJoin) {
        // 无权限且为付费模式
        this.$cjConfirm({
          title: '提示', //
          titleCenter: true, //标题是否居中
          message: '该主题设置了付费后参与,请先完成支付',
          messageCenter: true, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: true, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '去支付', //确认按钮文本
          onConfirm() {
            let queryT = null;
            queryT = {
              cId: 0,
              extId: _this.circleDetail.themeId,
              ckFrom: global.ckFrom.circleTheme,
              extraId: 0,
            }
            _this.$routerGo(_this, "push", {
              path: "/homePage/course/coursePay",
              query: queryT
            });
          },
          onCancel() {
          },
        })
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/circle/circleTheme",
          query: {
            themeId: this.circleDetail.themeId
          }
        })
      }
    },
    closeMoreActions() {
      this.showMoreActions = false;
    },
    // 进入圈子
    handleClickCircleFeed() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: this.circleId
        }
      })
    },
    handleClickRouteCircle(item) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleIndex",
        query: {
          circleId: this.circleId,
          circleMemberId: item.circleMemberId
        }
      })
    },
    handleClickCircleIndex() {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleIndex",
        query: {
          circleId: this.circleId,
          circleMemberId: this.circleMemberId
        }
      })
    },
    // 判断是否有权限
    isHasPermission() {
      if (this.circleDetail.hasPermission == false && this.status == 1) {
        this.$showCjToast({
          text: "加入圈子可参与互动",
          type: "warn",
        });
        return true;
      } else if (this.circleDetail.hasPermission == false && this.status == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else if (this.circleDetail.isExit == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else {
        return false;
      }
    },
    isSignOut() {
      // 黑名单
      if (this.status == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else {
        return false;
      }
    },
    // 转发生成图片
    getFeedsQRCode(item) {
      let circleFeedsId = item.circleFeedsId;
      utilJs.getMethod(`${global.apiurl}circle/getFeedsQRCode/${circleFeedsId}`, res => {
        this.qrcodeImg = "data:image/svg+xml;base64," + window.btoa(decodeURIComponent(encodeURIComponent(res.qrCodeUrl)))
        this.$refs.circlePoster.handleClickPoster(item);
      })
    },
    // 转发圈子
    handleClickForward() {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.getFeedsQRCode(this.circleDetail)
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
      if (this.isShowVideoAnswer) {
        this.showAnswerModal = true;
        this.isShowVideoAnswer = false;
      }
    },
    // 点击播放视频
    clickShowVideo(videoSrc) {
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      this.showVideo = true;
      this.currentVideoObj = { videoSrc }
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      //播放结束自动播放下一个非自己发的语音并且非已读语音
      this.playAduioSrc = "";
      this.progress = 0;
      document.getElementById("audio").src = this.playAduioSrc;
      this.isPlayingAudio = false;
    },
    // 播放音频
    clickPlayAudio(audioUrl, audioTime) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;
      this.progress = 0;
      //返回mp3则用audio播放，否则将使用微信将文件下载然后播放
      if (this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
        // let progressIndex = 0;
        // progressTime = setInterval(() => {
        //   progressIndex++;
        //   if (audioTime - progressIndex >= 0) {
        //     this.progress = (100 / audioTime) * progressIndex;
        //   } else {
        //     clearInterval(progressTime)
        //   }
        // }, 1000)
      }
      this.isPlayingAudio = true;
    },
    // 点赞
    like() {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      if (this.circleDetail.isZans) {
        this.circleDetail.isZans = false;
        this.circleDetail.likeCount--;
        this.setTabList(this.circleDetail.commentCount, this.circleDetail.likeCount);
        this.addZans(this.circleDetail.circleFeedsId);
        circleUtils.togglePoints({ actId: this.circleDetail.circleFeedsId, actType: 1, handleType: 2, sourceType: 6 }, this.circleId, this)
      } else {
        this.circleDetail.isZans = true;
        this.circleDetail.likeCount++
        this.setTabList(this.circleDetail.commentCount, this.circleDetail.likeCount);
        this.addZans(this.circleDetail.circleFeedsId);
        circleUtils.togglePoints({ actId: this.circleDetail.circleFeedsId, actType: 1, handleType: 1, sourceType: 6 }, this.circleId, this)
      }
    },
    setTabList(commentCount, likeCount) {
      let commentCount1 = commentCount == 0 ? '' : '(' + this.$options.filters['formatTenThousand'](commentCount) + ')';
      let likeCount1 = likeCount == 0 ? '' : '(' + this.$options.filters['formatTenThousand'](likeCount) + ')';
      this.tabList = [{
        index: 0,
        title: `评论${commentCount1}`
      }, {
        index: 1,
        title: `点赞${likeCount1}`
      }]
    },
    // 触发点赞接口
    addZans(circleFeedsId) {
      utilJs.postMethod(global.apiurl + `circle/addZans/${this.circleId}`, {
        circleFeedsId: circleFeedsId,
      }, res => {
        this.initData(); // 再次请求点赞列表数据
      })
    },
    // 弹窗置顶，精华
    handleClickOperation() {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      // 我是圈主身份时候
      if (this.circleDetail.myRole == 2) {
        this.moreActions = [
          {
            icon: this.circleDetail.isEssence == 1 ? "icon-yichujingxuan" : "icon-yirujingxuan",
            title: this.circleDetail.isEssence == 1 ? "移出精选" : "移入精选",
            updateField: "isEssence",
            isshow: true,
            isClick: this.circleDetail.status == 1 ? true : false,
            color: this.circleDetail.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: this.circleDetail.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: this.circleDetail.isEssence == 1 ? "-1" : "1",
            circleFeedsId: this.circleFeedsId
          }, {
            icon: "icon-zhiding1",
            title: this.circleDetail.isTop == 1 ? "取消置顶" : "置顶",
            updateField: "isTop",
            isshow: true,
            isClick: this.circleDetail.status == 1 ? true : false,
            color: this.circleDetail.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: this.circleDetail.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: this.circleDetail.isTop == 1 ? "-1" : "1",
            circleFeedsId: this.circleFeedsId
          }, {
            icon: "icon-yincang1",
            title: this.circleDetail.status == 1 ? "隐藏" : "取消隐藏",
            updateField: "status",
            isshow: true,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            status: this.circleDetail.status == 1 ? "-1" : "1",
            circleFeedsId: this.circleFeedsId
          }, {
            icon: "icon-lajitongxian",
            title: "删除",
            updateField: "delete",
            isshow: this.circleDetail.isSelf,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            circleFeedsId: this.circleFeedsId
          }
        ];
      } else if (this.circleDetail.myRole == 1 && this.circleDetail.isAnswer == 1 && this.companyAuth.enableQuestionModule == 1) {
        this.moreActions = [
          {
            icon: this.circleDetail.isEssence == 1 ? "icon-yichujingxuan" : "icon-yirujingxuan",
            title: this.circleDetail.isEssence == 1 ? "移出精选" : "移入精选",
            updateField: "isEssence",
            isshow: this.circleDetail.isAllowTopEssence == 1 ? true : false,
            isClick: this.circleDetail.status == 1 ? true : false,
            color: this.circleDetail.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: this.circleDetail.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: this.circleDetail.isEssence == 1 ? "-1" : "1",
            circleFeedsId: this.circleFeedsId
          }, {
            icon: "icon-zhiding1",
            title: this.circleDetail.isTop == 1 ? "取消置顶" : "置顶",
            updateField: "isTop",
            isshow: this.circleDetail.isAllowTopEssence == 1 ? true : false,
            isClick: this.circleDetail.status == 1 ? true : false,
            color: this.circleDetail.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: this.circleDetail.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: this.circleDetail.isTop == 1 ? "-1" : "1",
            circleFeedsId: this.circleFeedsId
          }, {
            icon: "icon-yincang1",
            title: this.circleDetail.status == 1 ? "隐藏" : "取消隐藏",
            updateField: "status",
            isshow: this.circleDetail.isAllowHideFeeds == 1 ? true : false,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            status: this.circleDetail.status == 1 ? "-1" : "1",
            circleFeedsId: this.circleFeedsId
          }, {
            icon: "icon-lajitongxian",
            title: "删除",
            updateField: "delete",
            isshow: this.circleDetail.isSelf,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            circleFeedsId: this.circleFeedsId
          }
        ];
      } else if (this.circleDetail.myRole == 1 && this.circleDetail.isSelf == true) {
        this.moreActions = [
          {
            icon: "icon-lajitongxian",
            title: "删除",
            updateField: "delete",
            isshow: true,
            circleFeedsId: this.circleFeedsId
          }
        ]
      }
      if (this.circleDetail.isSelf == true && !this.circleDetail.questionDetailId) {
        //动态是自己
        this.moreActions.push({
          icon: "icon-bianji",
          title: "编辑",
          updateField: "edit",
          isshow: true,
          color: 'c-fc-black',
          fontColor: 'c-fc-xblack',
          circleFeedsId: this.circleFeedsId,
          themeId: this.circleDetail.themeId
        });
      }
      this.showMoreActions = true;
    },
    // 操作圈子置顶，精华，隐藏
    getHandleFeeds(updateField, status, circleFeedsId, isClick, themeId) {
      let _this = this;
      if (isClick == false) {
        return;
      }
      if (updateField == "delete") {
        this.showMoreActions = false;
        this.$cjConfirm({
          title: '确定删除？', //
          titleCenter: true, //标题是否居中
          message: '删除后，发布的内容将无法恢复',
          messageCenter: true, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: true, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '', //确认按钮文本
          onConfirm: () => {
            _this.delCircleFeed(updateField, circleFeedsId);
            circleUtils.togglePoints({ actId: circleFeedsId, actType: 1, handleType: status == 1 ? 1 : 2, sourceType: 5 }, this.circleId, this)
          },
          onCancel() {
          },
        })
      } else if (updateField == 'edit') {
        let query = {
          id: this.circleId,
          feedsId: circleFeedsId,
        }
        if (themeId) {
          query.themeId = themeId
        }
        this.$routerGo(this, "push", {
          path: "/homePage/circle/circleRelease",
          query: query
        })
      } else {
        this.handleFeeds(updateField, status, circleFeedsId)
      }
    },
    // 删除圈子
    delCircleFeed(updateField, circleFeedsId) {
      let _this = this;
      utilJs.getMethod(`${global.apiurl}circle/delCircleFeed/${circleFeedsId}`, res => {
        this.showMoreActions = false;
        this.$showCjToast({
          text: "操作成功",
          type: "success",
        }).then(()=>{
          if (updateField == "delete") {
              _this.$routerGo(_this, "push", {
                path: "/homePage/circle/circleFeed",
                query: {
                  id: _this.circleId
                }
              })
            }
        })
      })
    },
    handleFeeds(updateField, status, circleFeedsId) {
      let _this = this;
      utilJs.postMethod(global.apiurl + `circle/handleFeeds/${circleFeedsId}`, {
        updateField: updateField,
        status: status
      }, res => {
        this.showMoreActions = false;
        this.$showCjToast({
          text: "操作成功",
          type: "success",
        }).then(()=>{
          if (updateField == 'isEssence') {
              //精选操作关联积分
              circleUtils.togglePoints({ actId: circleFeedsId, actType: 1, handleType: status == 1 ? 1 : 2, sourceType: 2 }, this.circleId, this)
            }
            _this.getFeedsDetail();
        })
      })
    },
    // 放大图片
    clickPreviewImage(imgUrl, itemImgList, imgIndex) {
      if (!imgUrl) {
        return;
      }
      let imgUrlList = [];
      for (let key of itemImgList) {
        if (key) {
          imgUrlList.push(key);
        }
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgUrlList // 需要预览的图片http链接列表
      });
      // this.$previewImg({
      //   activeIndex: imgIndex,
      //   imgList: imgUrlList
      // })
    },
    changeType(index) {
      this.tabIndex = index;
      if (index == 1) {
        this.initData();
      }
    },
    // 点赞列表初始化
    initData() {
      pageIndex = 0;
      page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.zansUserList = [];
      this.getZansList();
    },
    // 圈子点赞列表
    getZansList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/getZansList/${this.circleFeedsId}?index=${pageIndex}&page=${page}&limit=${LIMIT}`, res => {
        if (pageIndex == 1) {
          this.zansUserList = res.data;
        } else {
          this.zansUserList = [...this.zansUserList, ...res.data];
        }
        if (res.total * 1 == this.zansUserList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex += LIMIT;
          page++;
        }
      }, failRes => {
        this.dataStatus = "DATA_ERROR"
      })
    },
    // 转移圈子弹窗
    updateNewCircleMasterToast() {
      utilJs.postMethod(`${global.apiurl}circle/updateNewCircleMasterToast`, {
        circleId: this.circleId
      }, res => {

      })
    },
    // 获取动态详情
    getFeedsDetail() {
      let _this = this;
      utilJs.getMethod(`${global.apiurl}circle/getFeedsDetail/${this.circleFeedsId}`, res => {
        if (Array.isArray(res.resourceList.fileArr)) {
          res.resourceList.fileArr.forEach(fileItem => {
            let suffixStr = circleUtils.getFileSuffix(fileItem.fileName)
            fileItem.fullUrl = global.QINIU_DISPLAY_URL + fileItem.qiniuObject;
            fileItem.suffixClassName = "files-" + (suffixStr ? suffixStr : 'default');
          })
        }
        this.circleDetail = res;
        this.circleMemberId = res.circleMemberId;
        this.circleId = res.circleId;
        this.status = res.myStatus || 1;//圈子黑名单1，正常，-1拉入黑名单
        this.isExit = res.myIsExit || 1;//圈子1正常，-1退出圈子
        this.myIsNewCircleMaster = res.myIsNewCircleMaster;
        this.myNewCircleMasterToast = res.myNewCircleMasterToast;
        this.myIntroduce = res.myIntroduce;
        // 是否开启问答
        if (this.companyAuth.enableQuestionModule == 1 && res.questionDetail.status == 2 && (res.questionDetail.questionRole == 2 || res.questionDetail.questionRole == 3 || res.questionDetail.freeOnLook == 1 || (res.questionDetail.questionRole == 1 && res.questionDetail.isDirect == 1))) {
          this.getQuestionIfno();
        }
        // 判断为是否成为新圈主弹窗
        if (this.myIsNewCircleMaster == 1 && this.myNewCircleMasterToast == -1) {
          if (this.myIntroduce != null && this.myIntroduce != '') {
            // 存储是否成为新圈主
            this.$cjConfirm({
              title: '提示', //
              titleCenter: true, //标题是否居中
              message: '您已成为该圈子的新圈主，赶快去看看成员都在关注什么吧',
              messageCenter: true, //内容是否居中
              showMasker: true, //是否显示透明背景
              clickCloseModal: false, //是否点击透明背景关闭弹窗
              showCancelButton: false, //是否显示取消按钮
              cancelButtonText: '', //取消按钮文本
              confirmButtonText: '', //确认按钮文本
              onConfirm() {
              },
              onCancel() {
              },
            })
          } else {
            // 存储是否成为新圈主
            this.$cjConfirm({
              title: '', //
              titleCenter: true, //标题是否居中
              message: '您已成为该圈子的新圈主，赶快去设置圈主简介吧',
              messageCenter: true, //内容是否居中
              showMasker: true, //是否显示透明背景
              clickCloseModal: false, //是否点击透明背景关闭弹窗
              showCancelButton: true, //是否显示取消按钮
              cancelButtonText: '暂不填写', //取消按钮文本
              confirmButtonText: '去设置', //确认按钮文本
              onConfirm() {
                _this.$routerGo(_this, "push", {
                  path: "/homePage/circle/circleData",
                  query: {
                    circleId: _this.circleId
                  }
                })
              },
              onCancel() {
              },
            })
          }
          this.updateNewCircleMasterToast();
        }
        this.encodeUserId = res.userId;
        let commentCount = (res.commentCount == 0 ? '' : '(' + this.$options.filters['formatTenThousand'](res.commentCount) + ')');
        let likeCount = (res.likeCount == 0 ? '' : '(' + this.$options.filters['formatTenThousand'](res.likeCount) + ')');
        this.tabList = [{
          index: 0,
          title: `评论${commentCount}`
        }, {
          index: 1,
          title: `点赞${likeCount}`
        }]
        if (this.circleDetail.role != 0) {
          this.addVisitLog()
        }
        this.wechatShare();
      }, failRes => {
        this.$routerGo(this, "replace", {
          path: "/error/emptyPage",
          query: {
            from: "circle",
            info: failRes.data.msg
          }
        });
      })
    },
    // 播放添加评论的视频
    playAddCommentVideo(currentVideoObj) {
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      this.showVideo = true;
      this.currentVideoObj = currentVideoObj
    },
    // 获取操作评论索引
    getCommentOperation(item) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.operationComment = item;
      // 没有删除权限,点击直接回复
      if (item.delPermission) {
        this.showOperaction = true;
      } else {
        this.addReply();
      }
      let cId = item.rootCId;
      this.comments.forEach((cItem, index) => {
        if (cItem.commentId == cId) {
          cIndex = index;
        }
      })
    },
    // 删除评论
    deleteComment() {
      let comment = this.operationComment;
      utilJs.getMethod(`${global.apiurl}circle/delCircleComments/${comment.commentId}`, res => {
        this.showOperaction = false;
        this.$showCjToast({
          text: "删除成功",
          type: "success",
        });
        getType = 2;
        if (comment.rootCId == comment.commentId) {
          isFilterComment = true;
          let comments = this.comments.filter(item => item.commentId != comment.commentId);
          this.comments = comments;
        }
        this.getCircleCommentList(this.circleFeedsId);
        let commentCount = (comment.childCommentCount ? comment.childCommentCount : 0) + 1;
        this.$set(this.circleDetail, 'commentCount', this.circleDetail.commentCount - commentCount);
        this.setTabList(this.circleDetail.commentCount, this.circleDetail.likeCount);
        circleUtils.togglePoints({ actId: comment.commentId, actType: 2, handleType: 2, sourceType: 5 }, this.circleId, this)
      })
    },
    // 回复评论
    addReply() {
      this.showOperaction = false;
      this.showAddComment = true;
      this.addComment = { // 添加评论
        text: '',
        img: [],
      }
      getType = 2;
      this.$nextTick(() => {
        this.$refs.circleAddComment.$refs.contentArea.focus();
      })
    },
    // 发送评论
    sendComment(comment) {
      if (this.sendCommentFlag) return;
      this.sendCommentFlag = true;
      let data = {
        circleFeedsId: this.circleFeedsId,
        circleId: this.operationComment ? this.operationComment.circleId : this.circleId,
        parentId: this.operationComment ? this.operationComment.commentId : 0,
        rootCId: this.operationComment ? this.operationComment.rootCId : 0,
        replyUserId: this.operationComment ? this.operationComment.userId : 0,
        content: comment.text,
        img: comment.img,
        audio: comment.audio,
        audio_time: comment.audio_time,
        video: comment.video,
        grade: this.operationComment ? 2 : 1,
        type: this.operationComment ? 2 : 1,
        fileId: comment.fileId
      }
      utilJs.postMethod(`${global.apiurl}circle/addCircleFeedComments`, data, res => {
        this.$showCjToast({
          text: res.msg,
          type: "success",
        });
        this.sendCommentFlag = false;
        this.circleDetail.commentCount++;
        this.setTabList(this.circleDetail.commentCount, this.circleDetail.likeCount);
        this.showAddComment = false;
        this.getCircleCommentList(this.circleFeedsId);
        if (!this.operationComment) {
          circleUtils.togglePoints({ actId: res.commentId, actType: 2, handleType: 1, sourceType: 5 }, this.circleId, this)
        }
      }, failRes => {
        this.sendCommentFlag = false;
      })
    },
    // 关闭添加评论
    closeAddComment() {
      this.showAddComment = false;
    },
    // 获取一级评论
    getCircleComment() {
      commentPage = 1;
      this.commentDataStatus = "HAS_MORE_DATA";
      this.comments = [];
      isAddComment = false;
      isFilterComment = false;
      commentPage = 1;
      cIndex = 0;
      this.getCircleCommentList(this.circleFeedsId);
    },
    // 加载更多次级评论列表
    loadMoreComments(index) {
      this.$set(this.comments[index], 'isTotalShow', true);
    },
    // 获取评论列表
    getCircleCommentList(circleFeedsId) { // commentType=1一级评论 commentType=2二级评论
      let showMoreIndex = '';
      if (getType == 1) {
        if (this.commentDataStatus == 'LOADING') {
          return;
        }
        this.commentDataStatus = 'LOADING';
      } else {
        if (this.comments && this.comments[cIndex] && this.comments[cIndex].isTotalShow == true) {
          showMoreIndex = cIndex;
        }
      }
      let page = getType == 1 ? commentPage : parseInt(cIndex / 10) + 1;
      this.commentDataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/getCircleFeedComments?circleFeedsId=${circleFeedsId}&commentType=1&parentId=${circleFeedsId}&page=${page}`, res => {
        this.showCircleComment = true;
        let resList = res.data || [];
        if (resList && resList.length > 0) {
          childCommentChangeArr = [];
          for (let i = 0; i < resList.length; i++) {
            resList[i].isTotalShow = false;
            resList[i].createdAt = utilJs.changeCommentTime(resList[i].createdAt);
            if (resList[i].chileComment && resList[i].chileComment.length > 0) {
              this.commentChange(resList[i].chileComment);
              resList[i].replyList = childCommentChangeArr;
              resList[i].childCommentCount = resList[i].replyList.length;
              childCommentChangeArr = [];
            }
            resList[i].childCommentCount = resList[i].replyList ? resList[i].replyList.length : 0;
          }
        }
        if (getType == 2) {
          if (isAddComment && isFilterComment == false) {
            this.comments.unshift(resList[0]);
            isAddComment = false;
          } else if (isAddComment == false && isFilterComment == false && this.comments && this.comments.length > 0) {
            this.$set(this.comments, cIndex, resList[cIndex % 10]);
            if (!(showMoreIndex === '')) {
              this.$set(this.comments[showMoreIndex], 'isTotalShow', true);
              showMoreIndex = '';
            }
          } else if (isFilterComment) {
            isFilterComment = false;
            if (resList && resList.length > 0) this.comments.push(resList[resList.length - 1]);
          }
          getType = 1;
          cIndex = 0;
        } else {
          if (commentPage == 1) {
            this.comments = resList;
          } else {
            this.comments = [...this.comments, ...resList];
          }
          if ((res.total > this.comments.length) && (res.total != 0)) {
            commentPage++;
          }
        }
        if (this.comments && this.comments.length > 0) this.comments = this.unique(this.comments);
        if (res.total == this.comments.length) {
          this.commentDataStatus = res.total == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.commentDataStatus = 'HAS_MORE_DATA';
        }
      }, failRes => {
        this.commentDataStatus = "DATA_ERROR";
      })
    },
    // 评论去重
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.commentId) && res.set(arr.commentId, 1))
    },
    // 解构评论列表
    commentChange(commentArr) {
      for (let i = 0; i < commentArr.length; i++) {
        if (commentArr[i].isShow == -1) continue;
        commentArr[i].createdAt = utilJs.changeCommentTime(commentArr[i].createdAt);
        childCommentChangeArr.push(commentArr[i]);
        if (commentArr[i].chileComment && commentArr[i].chileComment.length > 0) {
          this.commentChange(commentArr[i].chileComment)
        }
      }
    },
    // 直接点击评论
    showAddCommentModal() {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      getType = 2;
      isAddComment = true;
      cIndex = 0;
      this.addComment = { // 添加评论
        text: '',
        img: [],
      }
      this.showAddComment = true;
      this.operationComment = null;
      this.$nextTick(() => {
        this.$refs.circleAddComment.$refs.contentArea.focus();
      })
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.tabIndex == 0 && this.commentDataStatus == 'HAS_MORE_DATA' && this.comments.length > 0) {
          this.getCircleCommentList(this.circleFeedsId);
        } else if (this.tabIndex == 1 && this.dataStatus == 'HAS_MORE_DATA' && this.zansUserList.length > 0) {
          this.getZansList();
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = `${this.circleDetail.nickname}动态内容` || window.localStorage.getItem("shareTitle");
      let shareImg = this.circleDetail.headimgurl || window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&circleFeedsId=${this.circleFeedsId}`;
      let shareDesc = `进入${this.circleDetail.circleConf.name},立即查看动态详情` || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = `${this.circleDetail.nickname}动态内容` || window.localStorage.getItem("shareTitle");
      let shareImg = this.circleDetail.headimgurl || window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&circleFeedsId=${this.circleFeedsId}`;
      let shareDesc = `进入${this.circleDetail.circleConf.name},立即查看动态详情` || '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/scss/circle.scss";
.circle_m {
  display: inline-block;
  width: 1.95rem;
  height: 0.7rem;
  background: url("../../../assets/i/wap/circle/circle_m.png") no-repeat center
    center;
  background-size: contain;
}
.answer_m {
  display: inline-block;
  width: 1.95rem;
  height: 0.7rem;
  background: url("../../../assets/i/wap/circle/answer_m.png") no-repeat center
    center;
  background-size: contain;
}
.answericon {
  background: #ffe5e5;
  color: #ff4040;
  .iconfont {
    position: relative;
    // top: -1px;
    color: #ff4040;
  }
}
.top {
  background: #e8f4ff;
  .iconfont {
    position: relative;
    // top: -1px;
  }
}
.select {
  background: #fff1e5;
  color: #ff7800;
  .iconfont {
    position: relative;
    // top: -1px;
    color: #ff7800;
  }
}
.hideStatus {
  background: #f2f2f2;
  padding: 0 0.2rem;
  .iconfont {
    position: relative;
    // top: -1px;
    color: #999;
  }
}
.thumbnail {
  margin-top: 0.2rem;
}
.thumbnail:nth-child(3n + 2) {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.active {
  color: #333333;
  font-size: 0.6rem;
  font-weight: 600;
}
.active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0.5rem;
  height: 0.1rem;
  background-color: #2194ff;
  transform: translateX(-50%);
  content: "";
}
.c-mr60 {
  margin-right: 1.5rem;
}
.fs96 {
  font-size: 2.4rem;
}
.pillar {
  width: 1px;
  margin: 0 1px;
  height: 0.1rem;
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite ease;
}
.pillar:first-child {
  animation-delay: 0.5s;
}
.pillar:nth-child(2) {
  animation-delay: 1s;
}
.pillar:nth-child(3) {
  animation-delay: 1.5s;
}
.status-0 {
  background: linear-gradient(90deg, #f74163, rgba(247, 65, 99, 0.7));
}
.status-1 {
  background: linear-gradient(90deg, #30b656, rgba(48, 182, 86, 0.7));
}
.status-2 {
  background: linear-gradient(90deg, #ff8920, #ffc26b);
}
.status-3 {
  background: linear-gradient(90deg, #406596, rgba(64, 101, 150, 0.7) 100%);
}
.status-4 {
  background: #cccccc;
}
@-webkit-keyframes pillarDance {
  0% {
    height: 0.1rem;
  }
  50% {
    height: 0.4rem;
  }
  100% {
    height: 0.1rem;
  }
}
</style>